<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form ref="formBook" :rules="rulesHomework" :model="formHomework" label-width="180px">
      <el-form-item label="作业名称" prop="name" >
        <el-input v-model.trim="formHomework.name"></el-input>
      </el-form-item>
      <el-form-item label="所属成员" prop="memberFamilyId">
        <el-select v-model="formHomework.memberFamilyId" placeholder="请选择所属成员">
          <el-option
            v-for="item in memberFamilyList"
            :key="item.id"
            :label="item.userName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学科类别" prop="subject">
        <el-select v-model="formHomework.subject" placeholder="请选择学科类别">
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作业说明" prop="remarks" >
        <el-input v-model.trim="formHomework.remarks" type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="是否可选" prop="optional" >
          <span slot="label">
            <el-tooltip content="作业是否必须要做完的，可选的作业是做完最好，不做也可以" placement="top" class="el-icon-color">
              <i class="el-icon-question"></i>
            </el-tooltip>
            是否可选
          </span>
        <el-radio-group v-model="formHomework.optional" >
          <el-radio :label="1">可选</el-radio>
          <el-radio :label="2">必须完成</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="formHomework.type" :disabled="typeDisabled" @change="typeChange">
          <el-radio :label="1">当天必须完成</el-radio>
          <el-radio :label="2">周期性</el-radio>
          <el-radio :label="3">限定时间完成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="完成频率" prop="advance" >
        <el-input-number v-model.trim="formHomework.frequency" :disabled="frequencyDisabled" :min="1" :max="366" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="作业开始时间" prop="startTime" >
        <!--这个组件会报 Avoid mutating a prop directly since the,添加 placement="bottom-start" -->
        <el-date-picker :disabled="startTimeDisabled"
          v-model="formHomework.startTime"
          :picker-options="pickerOptions"
          type="date"
          placement="bottom-start"
          placeholder="选择作业开始时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="作业截止时间" prop="deadline" >
        <!--这个组件会报 Avoid mutating a prop directly since the,添加 placement="bottom-start" -->
        <el-date-picker :disabled="deadlineDisabled"
          v-model="formHomework.deadline"
          :picker-options="pickerOptions"
          type="date"
          placement="bottom-start"
          placeholder="选择作业截止时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="评分标准" prop="scoringCriteria" >
        <el-input v-model.trim="formHomework.scoringCriteria" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="布置人" prop="assignHomework" >
        <el-input v-model.trim="formHomework.assignHomework"></el-input>
      </el-form-item>

      <el-form-item label="额外作业" prop="additional" >
          <span slot="label">
            <el-tooltip content="额外作业一般就是家长布置的作业，非额外作业就是老师布置的作业" placement="top" class="el-icon-color">
              <i class="el-icon-question"></i>
            </el-tooltip>
            额外作业
          </span>
        <el-radio-group v-model="formHomework.additional">
          <el-radio :label="2">额外作业</el-radio>
          <el-radio :label="1">非额外</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="难度系数" prop="difficulty" >
        <el-rate v-model="formHomework.difficulty" :texts="texts" show-text></el-rate>
      </el-form-item>
      <el-form-item label="知识点" prop="knowledgePoints" >
        <el-input v-model.trim="formHomework.knowledgePoints" type="textarea"></el-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd" v-if="defaultValue.saveUpdSelect !== 'select'">{{defaultValue.title}}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>
  import {clearInvalid, getFullDate, getNowDate} from "../../utils/utils";
  import http from '@/utils/http';

  export default {
    name: "HomeworkSaveUpd",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '查看',
          // 保存还是修改or查看,取值有 select | save | upd
          saveUpdSelect: 'select'
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 不能超过今天之前的时间
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        // 要提交的数据
        formHomework: {
          name: null,
          remarks: null,
          type: 1,
          optional: 2,
          startTime: getNowDate(),
          deadline: null,
          frequency: 1,
          scoringCriteria: null,
          assignHomework: null,
          additional: 1,
          subject: null,
          difficulty: 3,
          knowledgePoints: null,
          memberFamilyId: null,
        },
        // 学科类别列表
        subjectList: [],
        // 子女
        memberFamilyList: [],
        // 文字说明
        texts: ['非常简单', '简单', '普通', '难', '极难'],
        // 频率是否禁用
        frequencyDisabled: true,
        // 开始时间是否禁用
        startTimeDisabled: false,
        // 类型是否禁用
        typeDisabled: false,
        // 结束时间是否禁用
        deadlineDisabled: true,
        // 校验规则
        rulesHomework: {
          name: [{ required: true, message: '请输入作业名称', trigger: 'blur' }],
          startTime: [{ required: true, message: '选择作业开始时间', trigger: 'blur' }],
          memberFamilyId: [{ required: true, message: '请选择所属成员', trigger: 'change' }],
          optional: [{ required: true, message: '请选择是否可选', trigger: 'change' }],
          type: [{ required: true, message: '请选择类型', trigger: 'change' }],
          additional: [{ required: true, message: '请选择是否额外作业', trigger: 'change' }],
          subject: [{ required: true, message: '请选择学科类别', trigger: 'change' }],
        },
      }
    },
    methods: {
      /**
       * 类型发生变化
       * @param val
       */
      typeChange(val){
        if (val === 1){
          // 当天必须完成
          this.frequencyDisabled = true
          this.formHomework.frequency = 1
          // 结束时间也要修改为非点击
          this.deadlineDisabled = true
          this.formHomework.deadline = null

        } else if (val === 2){
          // 周期性
          this.frequencyDisabled = false
          // 结束时间也要修改为可点击
          this.deadlineDisabled = false
          this.formHomework.deadline = getNowDate()

        } else if (val === 3){
          // 限定时间完成
          this.frequencyDisabled = true
          this.formHomework.frequency = 1
          // 结束时间也要修改为可点击
          this.deadlineDisabled = false
          this.formHomework.deadline = getNowDate()

        } else {
          this.frequencyDisabled = false
          // 结束时间也要修改为可点击
          this.deadlineDisabled = false
          this.formHomework.deadline = getNowDate()
        }
      },
      /**
       * 打开弹出框之前
       * @param value 保存还是修改or查看,取值有 select \ save \ upd
       * @param obj 如果是修改和查看，则是详细数据,需要赋值
       * @param subjectList 学科类别，外部传入减少查询
       * @param memberFamilyList 子女，外部传入减少查询
       */
      openPageHomework(value, obj, subjectList, memberFamilyList){
        // 从外部转入，减少查询
        this.subjectList = subjectList
        this.memberFamilyList = memberFamilyList
        this.defaultValue.saveUpdSelect = value
        this.initHomework()

        if (value === 'save'){
          this.defaultValue.title = '保存家庭作业'
          this.typeDisabled = false
          this.startTimeDisabled = false
          this.frequencyDisabled = true

        } else if (value === 'upd'){
          this.defaultValue.title = '修改家庭作业'
          this.formHomework = JSON.parse(JSON.stringify(obj))
          if (this.formHomework.startTime){
            // 转换时间戳为日期
            this.formHomework.startTime = getFullDate(this.formHomework.startTime)
          }
          if (this.formHomework.deadline){
            // 转换时间戳为日期
            this.formHomework.deadline = getFullDate(this.formHomework.deadline)
          }

          // 更新情况下，这些不能修改
          this.typeDisabled = true
          this.startTimeDisabled = true
          this.frequencyDisabled = true

        } else {

        }

        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['教育 ', '家庭作业', this.defaultValue.title])
      },
      /**
       * 是保存还是修改音乐
       */
      toSaveUpd(){
        if (this.defaultValue.saveUpdSelect === 'save'){
          this.saveHomework()

        } else if (this.defaultValue.saveUpdSelect === 'upd'){
          this.updHomework()

        } else {

        }
      },
      /**
       * 保存家庭作业
       */
      saveHomework(){
        http.post("/homework/saveHomework", this.formHomework).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("保存成功");
          // 不关闭，直接重置
          this.$emit('getHomeworkListPage', null)
          this.initHomework()
          // 走保存的逻辑，这些不能再点击，默认重置到今天的作业
          this.defaultValue.title = '保存家庭作业'
          this.typeDisabled = false
          this.startTimeDisabled = false
          this.frequencyDisabled = true
          // 关闭弹出框
          // this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 更新家庭作业
       */
      updHomework(){
        clearInvalid(this.formHomework)
        http.post("/homework/updHomework", this.formHomework).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("修改成功");
          this.$emit('getHomeworkListPage', null)
          // 关闭弹出框
          this.initHomework()
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化
       */
      initHomework(){
        this.formHomework = {
          name: null,
          remarks: null,
          type: 1,
          optional: 2,
          startTime: getNowDate(),
          deadline: null,
          frequency: 1,
          scoringCriteria: null,
          assignHomework: null,
          additional: 1,
          subject: null,
          difficulty: 3,
          knowledgePoints: null,
          memberFamilyId: null,
        }
      },
    }
  }
</script>

<style scoped>

  .el-icon-color {
    color: #E6A23C;
  }

</style>
